<section class="section">
  <h2>Details</h2>
  <details>
    <summary>Details/Summary example</summary>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat velit
      lorem, feugiat congue lacus laoreet quis. Praesent maximus ex nec justo iaculis, in
      euismod eros dictum. Cras ac lorem sit amet purus malesuada blandit. Mauris gravida
      augue non urna sodales porttitor. Etiam ullamcorper luctus ullamcorper. In lobortis
      consequat ante.
    </p>
  </details>
  <br/>
  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;details&gt;
  &lt;summary&gt;Details/Summary example&lt;/summary&gt;
  &lt;p&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat velit
    lorem, feugiat congue lacus laoreet quis. Praesent maximus ex nec justo iaculis, in
    euismod eros dictum. Cras ac lorem sit amet purus malesuada blandit. Mauris gravida
    augue non urna sodales porttitor. Etiam ullamcorper luctus ullamcorper. In lobortis
    consequat ante.
  &lt;/p&gt;
&lt;/details&gt;</code></pre>
  </details>
  
  <section>
    <h3>Stacked details ("Accordion style")</h3>

    <details>
      <summary>Accordion 1</summary>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </details>
    <details>
      <summary>Accordion 2</summary>
      <p>
        Praesent placerat velit lorem, feugiat congue lacus laoreet quis.
      </p>
    </details>
    <details>
      <summary>Accordion 3</summary>
      <p>
        Praesent maximus ex nec justo iaculis, in euismod eros dictum.
      </p>
    </details>
    <br/>
    <details class="demo">
      <summary>View code</summary>
      <pre><code>&lt;details&gt;
  &lt;summary&gt;Accordion 1&lt;/summary&gt;
  &lt;p&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  &lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
  &lt;summary&gt;Accordion 2&lt;/summary&gt;
  &lt;p&gt;
    Praesent placerat velit lorem, feugiat congue lacus laoreet quis.
  &lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
  &lt;summary&gt;Accordion 3&lt;/summary&gt;
  &lt;p&gt;
    Praesent maximus ex nec justo iaculis, in euismod eros dictum.
  &lt;/p&gt;
&lt;/details&gt;</code></pre>
    </details>
  </section>
</section>

          

          